<template>
  <div class="right">
    <a-card style="border-radius: 5px">
      <a-button style="float: right" type="primary" @click="onCreateMechanism"
        >新建机构</a-button
      >
    </a-card>
    <a-card class="table">
      <a-table :columns="columns" :data-source="mechanismData">
      </a-table>
    </a-card>
  </div>
  <a-drawer
    title="新建机构"
    :width="600"
    :visible="openDrawer"
    :body-style="{ paddingBottom: '80px' }"
    :footer-style="{ textAlign: 'right' }"
    maskClosable
    destroyOnClose
    @close="openDrawer = false"
  >
    <createMechanism
      @clouse-drawer="openDrawer = false"
      :createParent="createParent"
      :parent-id="parentId"
      :mechanismData="editMechanismData"
    />
    <template #extra>请填写以下机构信息</template>
  </a-drawer>
</template>

<script setup lang="ts">
import { ref, createVNode } from "vue";
import { MechanismTreeData, TreeDataList } from "./types/index";
import createMechanism from "./createMechanism.vue";
import { message ,Button} from "ant-design-vue";
const openDrawer = ref(false);
defineProps<{
  createParent: string;
  parentId: string;
  mechanismData: MechanismTreeData[];
}>();
/**
 * 新建机构功能
 * onCreateMechanism 仅展示抽屉并把暂存编辑的数据清空
 */
const onCreateMechanism = () => {
  editMechanismData.value = undefined;
  openDrawer.value = true;
};
/**
 * 编辑机构数据功能
 * editMechanismData 暂存编辑的数据
 * editMechanism 仅展示抽屉并暂存编辑的数据
 */
const editMechanismData = ref<TreeDataList>();
const editMechanism = (record: TreeDataList) => {
  console.log(record);
  editMechanismData.value = record;
  openDrawer.value = true;
};
/**
 * 删除机构功能
 * deleteMechanism 删除机构方法 点击删除后会传输过来当前机构的id
 */
const deleteMechanism = (id: string) => {
  console.log(id);
  // 发送请求删除机构
  message.success("删除成功");
};
const columns = [
  {
    title: "序号",
    customRender: ({ index }: any) => {
      return index + 1;
    },
    align: "center",
  },
  {
    title: "机构名称",
    dataIndex: "name",
    align: "center",
  },
  {
    title: "机构编码",
    dataIndex: "mechanismcode",
    align: "center",
  },
  {
    title: "备注",
    dataIndex: "remark",
    align: "center",
  },
  {
    title: "操作",
    dataIndex: "action",
    align: "center",
    width:100,
    customRender: ({ record }: any) => {
      return createVNode(
        "div",
        {
          style: {
            display: "flex",
            justifyContent: "space-between",
          },
        },
        [
          createVNode(
            Button,
            {
              type: "link",
              size: "small",
              onClick: () => {
                editMechanism(record)
              },
            },
            () => "编辑"
          ),
          createVNode(
            Button,
            {
              type: "link",
              danger: true,
              size: "small",
              onClick: () => {
                deleteMechanism(record.id)
              },
            },
            () => "删除"
          ),
        ]
      );
    },
  },
];
</script>

<style scoped lang="less">
.right {
  z-index: 2;
}

.table {
  margin-top: 10px;
  height: 100%;
  border-radius: 5px;
}
</style>
